<template>
	<view class="beijt" v-if="pageshow" :style="{backgroundImage: 'url(' + yqhy_image + ')'}" @longpress="show=true">
		<view class="" :style="{'padding-top': title_top + 'px'}" v-if="isshow">
			<view class="flexcenter" ref="viewimage">
				<image src="@/static/images/login/tuoxingjian.png" mode="" class="imgtop"></image>
			</view>
			<!-- <view class="flexleft flexcenter" style="color: #fff;font-size: 32rpx;margin-top: 10rpx;" @click="toImage">
				托行健-托盘物流包装平台
			</view> -->
		</view>
		<view class="box">
			<view class="flexstart">
				<image :src="userInfo.avatar_text" mode="" class="img"></image>
				<view>
					<view class="flexleft">{{userInfo.nickname}}</view>
					<view>{{userInfo.invite_code}}</view>
				</view>
			</view>
			<view class="shilitu">
				<image :src="userInfo.invitation_image_text" mode=""
					@click="previewimg(0,userInfo.invitation_image_text.split())"></image>
			</view>
		</view>
		<view class="btn" @click="isshowFn">
			<button open-type="share" class="footer_stars">
				<view class="yaoqhybtn"></view>
			</button>
		</view>
		<u-popup :show="show" mode="center" @close="show=false">
			<canvas style="width: 650rpx; height: 1200rpx;" canvas-id="myCanvas"></canvas>
			<view class="mainpadding " style="background-color: #fb4e3d;" @click="toImage">
				<view class="flexcenter" style="color: #fff;">点击保存图片</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				userInfo: {},
				imgurl: "",
				pageshow: false,
				yqhy_image: "",
				title_top: "",
				ctx: null,
				show: false,
				isshow:true,

			}
		},
		onReady() {
			this.ctx = uni.createCanvasContext('myCanvas')
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.title_top = menuButtonInfo.top
			this.init()
			this.getsetmsg()
		},
		methods: {
			capture() {
				uni.getImageInfo({
					src: this.yqhy_image,
					success: res => {
						this.ctx.drawImage(res.path, 0, 0, 340, 600); //插入图片
						this.ctx.setFontSize(20)
						this.ctx.setFillStyle('#ffffff')
						this.ctx.setTextAlign('center')
						this.ctx.fillText("托行健物流托盘包装平台", 170,80)
						uni.getImageInfo({
							src: this.userInfo.invitation_image_text,
							success: res => {
								this.ctx.drawImage(res.path, 50, 300, 240, 240); //插入图片
								uni.getImageInfo({
									src: this.userInfo.avatar_text,
									success: res => {
										this.ctx.setFontSize(16)
										this.ctx.fillText(this.userInfo.nickname, 170,
											255)
										this.ctx.fillText(this.userInfo.invite_code,
											170, 280)
										this.ctx.setFillStyle('#ffffff')
										this.ctx.arc(80, 260, 30, 0, 2 * Math.PI)//设置圆角图片
										this.ctx.clip()
										this.ctx.drawImage(res.path, 50, 230, 60, 60)
										this.ctx.restore()
										this.ctx.draw()
									}
								})
							}
						})
					}
				})
			},
			toImage() {
				uni.canvasToTempFilePath({
					x: 0, // 从canvas的x轴的0点开始选中
					y: 0, // 从canvas的y轴的0点开始选中
					width: 340, // 选中canvas多宽
					height: 600, // 选中canvas多宽
					destWidth: 340, // 生成的图片多宽
					destHeight: 600, // 生成的图片多高
					canvasId: 'myCanvas',
					success: (res) => {
						// this.tempFilePath = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none"
								});
							}
						});
					}, // canvas的id
				})
				this.show = false
			},
			getsetmsg() {
				httpRequest.request('/api/index/getConfigInfo', 'POST', {}, false, false, true).then(res => {
					this.yqhy_image = res.data.yqhy_image
					this.pageshow = true
					this.capture()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			previewimg(index, arr) {
				let i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			onShareAppMessage() {
				return {
					title: "物流托盘包装交易平台",
					path: "pages/index/index?invite_code=" + uni.getStorageSync(
						"invite_code"),
				}
			},
			init() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	body {
	  overflow: hidden;
	}
	
	button {
		background: #fb4e3d;
	}

	.img {
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.imgtop{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
	}

	.box {
		background-color: #F46C1A;
		padding: 54rpx 80rpx;
		background-color: #ffff;
		position: absolute;
		top: 39%;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
		border-radius: 4%;
		box-sizing: border-box;
	}

	.yaoqhybtn {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		background-size: 100% 100%;
		background-image: url('/static/images/system/btn.png');
	}

	.btn {
		padding: 30rpx 100rpx 30rpx 100rpx;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.shilitu {
		margin: 40rpx auto 0;
		width: 392rpx;
		height: 392rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bightext {
		font-size: 69rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #F46C1A;
	}

	.zhonghtext {
		font-size: 47rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #F46C1A;
	}

	.huangsetext {
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #F46C1A;
	}

	.beijt {
		width: 100%;
		background-size: 100% 100%;
		// min-height: 100vh;
		height: 100vh;
		  overflow-y: scroll;
		  /* 使用滚动区域代替Webview滚动 */
		  -webkit-overflow-scrolling: touch;
		  /* IOS弹性 */
		  position: relative;
		  /* 相对位置 */
		  overflow-x: hidden;
		  /* X轴滚动 */
		  -webkit-transform: translateZ(0);
		  /* 3D加速 */
		  -webkit-overflow-scrolling: touch;
	}

	.btn {
		// position: fixed;


	}
</style>